<template>
	<div class="container">
		<!-- 路径导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>个人中心</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form :model="userInfo" label-width="100px">
			<el-form-item label="名称">
				<el-input v-model="userInfo.rootName"></el-input>
			</el-form-item>
			<el-form-item label="昵称">
				<el-input v-model="userInfo.rootNickname"></el-input>
			</el-form-item>
			<el-form-item label="联系电话">
				<el-input v-model="userInfo.rootPhone"></el-input>
			</el-form-item>
			<el-form-item label="邮箱地址">
				<el-input v-model="userInfo.rootEmail"></el-input>
			</el-form-item>
			<el-form-item label="角色">
				<span>{{ roleDisplay }}</span>  
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="clearUserInfo">清空</el-button>
				<el-button type="primary" @click="saveUserInfo">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		url
	} from '../../util/tool.js'
	export default {
		data() {
			return {
				userInfo: { // 个人对象信息
					"id": "",
					"rootName": "",
					"rootPassword": "",
					"rootNickname": "",
					"rootEmail": "",
					"rootPhone": "",
					"rootRole": ""
				},
			}
		},
		computed: {  
		    roleDisplay() {  
		      const roles = {  
		        1: '管理员',  
		        2: '咨询师',  
		        3: '客服'  
		      };  
		      return roles[this.userInfo.rootRole] || '未知角色';  
		    }  
		  }  ,
		methods: {
		
			// 清空个人内容
			clearUserInfo() {
				let id = this.userInfo.id
				let role = this.userInfo.rootRole
				this.userInfo = {
					"id": id,
					"rootName": "",
					"rootPassword": "",
					"rootNickname": "",
					"rootEmail": "",
					"rootPhone": "",
					"rootRole": role
				}
			},
			//	保存个人内容
			saveUserInfo() {
				this.$http.put("rootUser", this.userInfo)
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success("修改成功！")
						} else {
							this.$message.error("修改失败！")
						}
					})
			},
			
			
			queryList() {
				//	调用后端接口
				let rid = sessionStorage.getItem('id')
				this.$http.get('rootUser/'+rid)
					.then(res => {
						if (res.data.status == 200) {
							this.userInfo = res.data.data
						} else {
							this.$message.error("查询失败")
						}
					})
			}
		},
		mounted() {
			this.queryList()
			// 动态的获取tool.js中的url，并赋值给当前组件的全局url
			this.url = url;
		}
	}
</script>
<style>
	/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
	.ql-container {
		min-height: 200px;
	}

	.el-breadcrumb {
		margin-bottom: 15px;
		padding: 0 0 15px;
		border-bottom: 1px solid #ddd;
	}

	.el-pagination {
		margin-top: 15px;
	}

	.el-link {
		padding: 0 5px;
	}
</style>